theme: better running, hover and active states for icons

- the active state behaves oddly though, not respecting
  the fill color, just changing alpha it seems...

diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index eff7cb587c70214deaca8d9b0b3047fbb4f7f8f3..305f51448bc4e2b15b6f081377575fcdcd09611e 100644 (file)
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -457,7 +457,7 @@ StScrollBar {
   
   #dash {
     @extend %overview-panel;
-    padding: 4px 0;
+    padding: 4px;
     border-left: 0px;
     border-radius: 0px 9px 9px 0px;
     
@@ -517,8 +517,11 @@ StScrollBar {
   .search-provider-icon,
   .list-search-result {
     @extend %icon_tile;
-    &:active, &:checked { background-color: transparentize($osd_bg_color,.1); }
-    &:focus, &:selected, &:hover { background-color: transparentize($osd_bg_color,.5); }
+    &:active, &:checked { background-color: transparentize(darken($osd_bg_color,10%),.1); }
+    &:focus, &:selected, &:hover { 
+      background-color: transparentize($fg_color,.9);
+      transition-duration: 200ms;
+    }
   }
   .app-well-app, 
   .show-apps,
@@ -531,13 +534,15 @@ StScrollBar {
     }
     &:active > .overview-icon, 
     &:checked > .overview-icon {
-      background-color: transparentize($osd_bg_color,.1);
+      background-color: transparentize(darken($osd_bg_color,10%),.1); //FIXME not working?
+      box-shadow: inset 0 1px 2px $osd_borders_color;
     }
     &:hover > .overview-icon, 
     &.running:hover > .overview-icon,
     &:focus > .overview-icon, 
     &:selected > .overview-icon { 
-      background-color: transparentize($osd_bg_color,.5);
+      background-color: transparentize($fg_color,.9);
+      transition-duration: 200ms;
       border-image: none;
       background-image: none;
     }

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 674f5f2e926e1d6f68bb965a0ba05f0f2a4a807d..4f618487670e9ef0ef89435abe463cd40fe52b29 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1689,7 +1689,7 @@ StScrollBar {
 
 /* DASHBOARD */
 #dash {
-  padding: 4px 0;
+  padding: 4px;
   border-left: 0px;
   border-radius: 0px 9px 9px 0px; }
   #dash:rtl {
@@ -1738,12 +1738,13 @@ StScrollBar {
 .search-provider-icon:active, .search-provider-icon:checked,
 .list-search-result:active,
 .list-search-result:checked {
-  background-color: rgba(46, 52, 54, 0.9); }
+  background-color: rgba(23, 25, 26, 0.9); }
 .search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
 .list-search-result:focus,
 .list-search-result:selected,
 .list-search-result:hover {
-  background-color: rgba(46, 52, 54, 0.5); }
+  background-color: rgba(238, 238, 236, 0.1);
+  transition-duration: 200ms; }
 
 .app-well-app.running > .overview-icon,
 .show-apps.running > .overview-icon,
@@ -1754,7 +1755,8 @@ StScrollBar {
 .show-apps:checked > .overview-icon,
 .grid-search-result:active > .overview-icon,
 .grid-search-result:checked > .overview-icon {
-  background-color: rgba(46, 52, 54, 0.9); }
+  background-color: rgba(23, 25, 26, 0.9);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); }
 .app-well-app:hover > .overview-icon, .app-well-app.running:hover > .overview-icon, .app-well-app:focus > .overview-icon, .app-well-app:selected > .overview-icon,
 .show-apps:hover > .overview-icon,
 .show-apps.running:hover > .overview-icon,
@@ -1764,7 +1766,8 @@ StScrollBar {
 .grid-search-result.running:hover > .overview-icon,
 .grid-search-result:focus > .overview-icon,
 .grid-search-result:selected > .overview-icon {
-  background-color: rgba(46, 52, 54, 0.5);
+  background-color: rgba(238, 238, 236, 0.1);
+  transition-duration: 200ms;
   border-image: none;
   background-image: none; }